从本篇开始我们将探讨 Nuxt 工程架构相关的知识，我们将学习一些进阶知识，从更高层级审视 Nuxt，从而更加得心应手地使用 Nuxt。本篇涉及内容如下：
- Nuxt 框架生命周期；
- 中间件使用；
- 插件的使用；
- 模块的使用；
- 层的使用；
- 项目模版使用；
- 工程化搭建。
# Nuxt 生命周期钩子
本节探讨的是 Nuxt 的生命周期钩子，为什么要了解这个知识呢？
主要是因为我们后续的项目扩展知识需要用到各种钩子函数，比如编写一个 Nuxt 插件或者模块，我们常常需要在框架执行的某个特定阶段做一些特定的事情，又或者我们需要获取并修改 Nuxt 应用实例或者 Vue 实例，等等。
比如前面章节中在错误处理时，我们就用到过钩子函数：
javascript
复制代码export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.hook('app:error', (..._args) => {
console.log('app:error')
})
nuxtApp.hook('vue:error', (..._args) => {
console.log('vue:error')
})
})
@前端进阶之旅: 代码已经复制到剪贴板
# Nuxt 生命周期分类
由于 Nuxt 整合了 Vue、Nitro 前后端两个运行时，再加上它自身的创建过程，因此框架生命周期钩子分为三类：
- Nuxt 钩子；
- Vue App 钩子；
- Nitro App 钩子。
# Nuxt 钩子
Nuxt 钩子在构建时执行，贯穿初始化和构建过程中各种工具和引擎，例如 Nuxi、Vite、Webpack、Nitro 等，主要用于编写模块时构建上下文。
基本用法如下：
javascript
复制代码import { defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
setup (options, nuxt) {
nuxt.hook('ready', async (nuxt: Nuxt) => {
// 在这里配置 nuxt
})
}
})
@前端进阶之旅: 代码已经复制到剪贴板
我们做一个实际应用作为演示：在整合 NaiveUI 时，如果按照官方操作自动导入，则无法获得 TS 类型支持。
这个需求可以用一个模块来完成：这里利用了 prepare:types 这个钩子配置 ts：
javascript
复制代码import { defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
setup (options, nuxt) {
nuxt.hook('prepare:types', ({ tsConfig, references }) => {
tsConfig.compilerOptions!.types.push('naive-ui/volar')
references.push({
path: 
